<template xmlns="">
  <div class="wraps">
    <!-- 左上 科技奖获得实时情况 -->
    <div class="upperleft">
      <el-card class="box-card" shadow="hover" style="height: 50.2vh;overflow: hidden">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px; color: #1890ff; font-weight: 550">科技奖获得实时情况</span>
        </div>
        <div style="font-size: 16px">
          <jkjHdSsQk></jkjHdSsQk>
        </div>
      </el-card>
    </div>
    <!--中上 成果展示-->
    <div class="soso">
      <el-card class="box-card" shadow="hover" style="height: 50.2vh">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px; color: #1890ff; font-weight: 550">图片展示</span>
        </div>
        <el-carousel :interval="5000" arrow="always">
          <el-carousel-item v-for="item in xmKbImgList" :key="item.name">
            <img class="img" :src="item.src" alt="图片丢失了" :title="item.title">
          </el-carousel-item>

        </el-carousel>

        <div class="container">
          <div class="row" v-for="(item, index) in pairedData" :key="index">
            <div class="col">{{ item.left.title }}: <span style="color: #03A9F3">{{ item.left.value }} {{ item.left.unit }}</span> 项</div>
            <div class="col">{{ item.right.title }}: <span style="color: #03A9F3"> {{ item.right.value }} {{ item.right.unit }} </span> 项</div>
          </div>
        </div>

      </el-card>
    </div>
    <!-- 右上 省部级工法获得实时情况 -->
    <div class="upperRight">
      <el-card class="box-card" shadow="hover" style="height: 50.2vh">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px; color: #1890ff; font-weight: 550">省部级工法获得实时情况</span>
        </div>
        <sbjGfHdSsQk/>
      </el-card>
    </div>
    <!-- 下面 专利授权实时动态 -->
    <div class="lowerLeft">
      <el-card class="box-card" shadow="hover" style="height: 44.2vh">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px; color: #1890ff; font-weight: 550">专利授权实时动态</span>
        </div>
        <div style="font-size: 16px">
          <div class="box" @mouseover="pauseAnimation" @mouseout="resumeAnimation">
            <div class="imgList" ref="imgList" :class="{ pause: isPaused }">
              <img v-for="(src, index) in doubleImages" :key="index" :src="src" />
            </div>
          </div>

        </div>
      </el-card>
    </div>



  </div>
</template>

<script>
import BndZlSqsSsPm from "@/views/zscq/zscqkb/bndZlSqsSsPm.vue";
import ZsCqTj from "@/views/zscq/zscqkb/zsCqTj.vue";
import HxZlFb from "@/views/zscq/zscqkb/hxZlFb.vue";
import JkjHdSsQk from "@/views/kjcg/kjcgkb/jkjHdSsQk";
import sbjGfHdSsQk from "@/views/kjcg/kjcgkb/sbjGfHdSsQk";
export default {
  name: 'Zscqkb',
  components: {sbjGfHdSsQk, HxZlFb, BndZlSqsSsPm, ZsCqTj,JkjHdSsQk},
  data() {
    return {
      images: [
        'https://ts4.cn.mm.bing.net/th?id=ORMS.271116a8379adba9fa883330b7d3b9dc&pid=Wdp&w=612&h=328&qlt=90&c=1&rs=1&dpr=1&p=0',
        'https://ts2.cn.mm.bing.net/th?id=ORMS.36694af8e26b82ab45531325d58f8cee&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=1&p=0',
        'https://ts2.cn.mm.bing.net/th?id=ORMS.971b2a84185516a182b7599e763ce6c3&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=1&p=0',
        'https://ts2.cn.mm.bing.net/th?id=ORMS.971b2a84185516a182b7599e763ce6c3&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=1&p=0',
        'https://ts2.cn.mm.bing.net/th?id=ORMS.971b2a84185516a182b7599e763ce6c3&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=1&p=0',
        'https://ts2.cn.mm.bing.net/th?id=ORMS.971b2a84185516a182b7599e763ce6c3&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=1&p=0',
        // 添加更多图片URL...
      ],
      isPaused: false,
      data: [
        { title: '国家科技进步奖', value: 1 },
        { title: '电建科技进步奖', value: 82 },
        { title: '国家级工法总数', value: 7 },
        { title: '国家级工法总数', value: 7 },
        { title: '国家级工法总数', value: 7 },
        { title: '国家级工法总数', value: 7 },
        { title: '国家级工法总数', value: 7 },
        { title: '集团工法总数', value: 355 },
        // 添加更多数据...
      ],
      xmKbImgList: [
        {
          name: '2022',
          src: require('../../../assets/images/xmgl-xmkb-tpzs/2022年科技创新先进集体.jpg')
          // title: "2022年科技创新先进集体"
        },
        {
          name: '2021',
          src: require('../../../assets/images/xmgl-xmkb-tpzs/2021年科技创新先进集体.jpg')
          // title: "2021年科技创新先进集体"
        },
        {
          name: '2020',
          src: require('../../../assets/images/xmgl-xmkb-tpzs/2020年科技创新先进集体.jpg')
          // title: "2020年科技创新先进集体"
        }
      ]
    }
  },
  computed: {
    doubleImages() {
      return this.images.concat(this.images);
    },
    pairedData() {
      const pairs = [];
      for (let i = 0; i < this.data.length; i += 2) {
        pairs.push({
          left: this.data[i],
          right: this.data[i + 1] || { title: '', value: '', unit: '' }
        });
      }
      return pairs;
    }
  },
  methods: {
    pauseAnimation() {
      this.isPaused = true;
    },
    resumeAnimation() {
      this.isPaused = false;
    },
    handleAnimationIteration() {
      this.$refs.imgList.style.transform = 'translateX(0)';
    }
  },
  mounted() {
    this.$refs.imgList.addEventListener('animationiteration', this.handleAnimationIteration);
  },
  beforeDestroy() {
    if (this.$refs.imgList) {
      this.$refs.imgList.removeEventListener('animationiteration', this.handleAnimationIteration);
    }
  },
  created() {

  }
}
</script>

<style scoped>
.wraps {
  position: relative;
  background-size: cover;
  width: 100%;
  height: calc(100vh - 134px);
  border: 2px dashed #aaa;
  overflow: hidden; /* 防止 leftpart 超出 wrap */
}

/* 左上 */
.upperleft {
  position: absolute;
  top: 1%; /* 距离上面 6% */
  bottom: 40%; /* 距离下面 60% */
  left: 1%; /* 距离左侧1% */
  width: 30%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5); !* 模块背景颜色 并透明显示 *!*/
}

/* 下面 */
.lowerLeft {
  position: absolute;
  top: 65%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 1%; /* 距离左侧1% */
  width: 100%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5);*/
}

/* 中上 */
.soso {
  position: absolute;
  top: 1%; /* 距离上面 6% */
  bottom: 40%; /* 距离下面 60% */
  left: 32%; /* 距离左侧1% */
  width: 36%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5);*/
}


/* 右上 */
.upperRight {
  position: absolute;
  top: 1%; /* 距离上面 6% */
  bottom: 40%; /* 距离下面 60% */
  left: 69%; /* 距离左侧1% */
  width: 30%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5);*/
}

/* header 头部背景 */
/deep/ .el-card__header {
  padding: 6px 15px 7px;
  min-height: 30px;
  background-color: #D9EDF7;
}

/deep/ .el-card__body {
  padding: 2px 20px 20px 20px;
  height: 40vh;
}

.soso /deep/ .el-card__body{
  padding: 20px;
  box-sizing: border-box;
  height: calc(100% - 40px) !important;
}
.soso /deep/ .el-carousel{
  height: 90%;
}
.soso /deep/ .el-carousel__container{
  height: 100% !important;
}
.soso /deep/ .el-carousel__item{
  height: 100% !important;
}
.soso /deep/ .img{
  width: 100%;
  height: 100%;
}

/* 中上文字 */
.container {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0px;
}

.col {
  flex: 1;
  padding: 2px;
  text-align: center;
  border-right: 1px solid #ddd;
}

.col:last-child {
  border-right: none;
}

/*下面轮播图*/
* {
  margin: 0;
  padding: 0;
}
.box {
  width: 100%;
  /*height: 300px;*/
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid pink;
  position: relative;
}
.imgList {
  animation: rolling 15s linear infinite;
  position: absolute;
  display: flex;
}
img {
  /*height: 300px;*/
  margin-right: 10px;
}
/*@keyframes rolling {*/
/*  from {*/
/*    transform: translateX(0);*/
/*  }*/
/*  to {*/
/*    transform: translateX(-50%); !* 因为我们有两组相同的图片，所以这里使用 -50% *!*/
/*  }*/
/*}*/
.pause {
  animation-play-state: paused;
}
::v-deep .div.el-table body-wrapper.is-scrolling-none{
  height: 400px !important;
}
.el-table__body-wrapper is-scrolling-none {
  height: 372px !important;
}
/* 2000px */
@media screen and (min-width: 2000px) {
  .box {
    height: 300px;
  }
  img {
    height: 300px;
  }
  @keyframes rolling {
    from {
      transform: translateX(5);
    }
    to {
      transform: translateX(-50%); /* 因为我们有两组相同的图片，所以这里使用 -50% */
    }
  }
}
/* 1700px 到 1999px */
@media screen and (min-width: 1700px) and (max-width: 1999px) {
  .box {
    height: 250px;
  }
  img {
    height: 250px;
  }
  @keyframes rolling {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%); /* 因为我们有两组相同的图片，所以这里使用 -50% */
    }
  }
}

/*!* 1400px 到 1699px *!*/
@media screen and (min-width: 1400px) and (max-width: 1699px) {
  .box {
    height: 180px;
  }
  img {
    height: 180px;
  }
  .col {
    flex: 1;
    padding: 0px;
    text-align: center;
    border-right: 1px solid #ddd;
  }
  @keyframes rolling {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-45%); /* 因为我们有两组相同的图片，所以这里使用 -50% */
    }
  }
}

/* 1100px 到 1399px */
@media screen and (min-width: 1100px) and (max-width: 1399px) {
  .box {
    height: 140px;
  }
  img {
    height: 140px;
  }
  .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
    font-size: 12px;
  }
  @keyframes rolling {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-40%); /* 因为我们有两组相同的图片，所以这里使用 -50% */
    }
  }
}

/*!* 900px 到 1099px *!*/
@media screen and (min-width: 900px) and (max-width: 1099px) {
  .box {
    height: 110px;
  }
  img {
    height: 110px;
  }
  .imgList {
    animation-duration: 12s;
  }
  .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
    font-size: 8px;
  }
  @keyframes rolling {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-40%); /* 因为我们有两组相同的图片，所以这里使用 -50% */
    }
  }
}

/* 899px 及以下 */
@media screen and (max-width: 899px) {
  .box {
    height: 90px;
  }
  img {
    height: 90px;
    margin-right: 3px;
  }
  .imgList {
    animation-duration: 5s;
  }
  .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
    font-size: 5px;
  }
  @keyframes rolling {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-40%); /* 因为我们有两组相同的图片，所以这里使用 -50% */
    }
  }
}
</style>

